<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-23 17:13:17
-->
<template>
    <div class="newmusic">
        <!-- 头部 -->
        <div class="title">
            <TypeNav :typeitem="typeitem" @typeItemClick="typeItemClick"></TypeNav>
            <div class="btn">
                <el-button type='danger' size="small" icon="VideoPlay">播放全部</el-button>
                <el-button icon="CirclePlus" size="small">收藏全部</el-button>
            </div>
        </div>

        <!-- 歌曲列表 -->
        <div class="list" v-if="newSongList.length !== 0">
            <el-table :data="newSongList" stripe style="width: 100%">
                <!-- 索引 -->
                <el-table-column type="index" width="50">
                    <template v-slot="{ row, $index }">
                        <span>{{ $index + 1 }}</span>
                    </template>
                </el-table-column>
                <!-- 歌曲图片 -->
                <el-table-column width="120">
                    <template v-slot="{ row, $index }">
                        <div class="img">
                            <img v-lazy="row.album.picUrl" alt="">
                            <!-- <img :src="gotoBase64(row.album.picUrl)" alt=""> -->
                            <!-- <img :src="changeBase64" alt=""> -->
                            <div class="mask-playicon">
                                <span class="iconfont icon-shipinbofangshibofang"></span>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <!-- 歌曲名字 -->
                <el-table-column width="400">
                    <template v-slot="{ row, $index }">
                        <span>{{ row.name }}</span>
                    </template>
                </el-table-column>
                <!-- 歌曲作者 -->
                <el-table-column width="200">
                    <template v-slot="{ row, $index }">
                        <span>{{ row.artists[0].name }}</span>
                    </template>
                </el-table-column>
                <!-- 歌曲介绍 -->
                <el-table-column width="250">
                    <template v-slot="{ row, $index }">
                        <span>{{ row.album.name }}</span>
                    </template>
                </el-table-column>
                <!-- 歌曲时长 -->
                <el-table-column width="150">
                    <template v-slot="{ row, $index }">
                        <!-- 使用插件 -->
                        <span>{{ instance.proxy.$formatDuration.formatDurations(row.duration) }}</span>
                    </template>
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>

<script setup>
import { getNewSongs } from '@/api/findmusic/newsongs/newsongs'
import TypeNav from '@/components/TypeNav.vue'
import { ref, onMounted, getCurrentInstance } from 'vue'
// import { gotoBase64 } from '@/utils/utils.js'
const instance = getCurrentInstance()

const typeitem = ref([
    { name: '全部', type: 0 },
    { name: '华语', type: 7 },
    { name: '欧美', type: 96 },
    { name: '韩国', type: 16 },
    { name: '日本', type: 8 },
])
//默认是全部
let type = ref(0)
let newSongList = ref([])

//自定义事件的回调函数
function typeItemClick(item) {
    //再次获取相应类型的数据
    type.value = item.type
    getNewSongList()
}

//获取默认数据 —— 全部 新歌
async function getNewSongList() {
    let res = await getNewSongs(type.value)
    if (res.status === 200) {
        newSongList.value = res.data.data
    }
}


onMounted(() => {
    getNewSongList()
})

</script>

<style lang="scss" scoped>
.newmusic {
    .title {
        display: flex;
        justify-content: space-between;
    }
}

.img {
    cursor: pointer;
    position: relative;
    height: 80px;
    width: 80px;

    img {
        width: 100%;
        height: 100%;
    }
}

.mask-playicon {
    height: 80px;
    background: none;
}
</style>